package elements.menu ;

import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.filters.GlowFilter;
import string.Utils;
import ColorConverter.Color;

class MenuItem extends Sprite {
	
		var chartId:String;
		var props:Properties;
	
	public function new(chartId:String, props:Properties) {
		super();
		this.props = props;
		
		this.buttonMode = true;
		this.useHandCursor = true;
		this.chartId = chartId;
			
		this.alpha = 0.5;
		
		var width: Float = this.add_elements();
		
		this.draw_bg(
			width +
			10 // 5px padding on either side
			);
		
		this.addEventListener(MouseEvent.CLICK, mouseClickHandler);
		this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
		this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
	}
	
	function add_elements(): Float {
		var width: Float = this.add_text(this.props.get('text'), 5);
		return width;
	}
	
	function draw_bg( width: Float ):Void {
		this.graphics.beginFill(ColorConverter.toInt(Hex(this.props.get('background-color')))); //string.Utils.get_color( this.props.get('background-color') ));
		this.graphics.drawRoundRect(0, 0, width, 20, 5, 5 );
		this.graphics.endFill();
	}
	
	
	function add_text(text:String, left: Float): Float {
		var title:TextField = new TextField();
		title.x = left;
		title.y = 0;
		
		//this.text = 'Save chart';
		
		title.htmlText = text;
		
		var fmt:TextFormat = new TextFormat();
		fmt.color = string.Utils.get_color( this.props.get('text-color') );
		fmt.font = 'Verdana';
	//			fmt.bold = this.css.font_weight == 'bold'?true:false;
		fmt.size = 10;// this.css.font_size;
		fmt.underline = true;
	//			fmt.align = flash.text.TextFormatAlign.CENTER;
	
		title.setTextFormat(fmt);
		title.autoSize = flash.text.TextFieldAutoSize.LEFT;
		
		// so we don't get an I-beam cursor when we mouse
		// over the text - pass mouse messages onto the button
		title.mouseEnabled = false;
		
	//			title.border = true;
		
		this.addChild(title);
		
		return title.width;
	}

	public function mouseClickHandler(event:MouseEvent):Void {
		this.alpha = 0.0;
		//tr.aces('Menu item clicked:', this.props.get('javascript-function')+'('+this.chartId+')');
		ExternalInterface.call(this.props.get('javascript-function'), this.chartId);
		this.alpha = 1.0;
	}

	public function mouseOverHandler(event:MouseEvent):Void {
		this.alpha = 1;

		///Glow Filter
		var glow:GlowFilter = new GlowFilter();
		glow.color = ColorConverter.toInt(Hex(this.props.get('glow-color'))); //string.Utils.get_color( this.props.get('glow-color') );
		glow.alpha = 0.8;
		glow.blurX = 4;
		glow.blurY = 4;
		glow.inner = false;
		
		this.filters = new Array<GlowFilter>();
		this.filters.push(glow);
	}
	
	public function mouseDownHandler(event:MouseEvent):Void {
		this.alpha = 1.0;
	}

	public function mouseOutHandler(event:MouseEvent):Void {
		this.alpha = 0.5;
		this.filters = new Array();
	}
}
